<template>
  <div class="contents">
    <el-tabs v-model="activeName">
      <el-tab-pane label="批量核价" name="first">
        <div style="padding: 30px">
          <el-steps :active="3" finish-status="success">
            <el-step description="选择时间段要核准的订单" title="确认时间" />
            <el-step description="选择核准价方式" title="核价方式" />
            <el-step description="核准价参考方式" title="智能参考" />
            <el-step description="编辑商品价，敲回车" title="修改价格" />
          </el-steps>
        </div>
        <div style="margin-top: 10px">
          <span style="margin-right: 10px">发货日期</span>
          <el-date-picker
            end-placeholder="结束日期"
            range-separator="-"
            start-placeholder="开始日期"
            style="width: 200px"
            type="daterange"
          />
          <span style="margin-right: 5px; margin-left: 40px">特殊设置</span>
          <el-checkbox v-model="setting">本次刷价同步更新商品资料</el-checkbox>
          <div style="float: right; padding: 0 20px">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              class="upload-demo"
              :limit="3"
              multiple
              style="display: inline-block"
            >
              <el-button size="small">导入</el-button>
            </el-upload>
            <el-button size="small" style="margin-left: 15px">导出</el-button>
          </div>
        </div>
        <div style="margin: 20px 0">
          <h3 class="titleDot">待刷价商品清单</h3>
        </div>
        <div style="margin-bottom: 40px; padding-right: 30px">
          <el-select
            class="selectW"
            placeholder="选择仓库"
            style="width: 140px; margin-right: 5px"
          >
            <el-option label="全部" value="0" />
            <el-option label="默认库房" value="1" />
            <el-option label="冻货库房" value="2" />
          </el-select>
          <el-cascader
            :options="options"
            style="width: 200px; margin-right: 5px"
          />
          <el-select
            class="selectW"
            placeholder="选择集团"
            style="width: 200px; margin-right: 5px"
          >
            <el-option label="全部集团" value="0" />
            <el-option label="TC集团" value="1" />
            <el-option label="XB集团" value="2" />
          </el-select>
          <el-select
            class="selectW"
            placeholder="全部仓库类型"
            style="width: 130px; margin-right: 5px"
          >
            <el-option label="全部" value="0" />
            <el-option label="默认库房" value="1" />
            <el-option label="冻货库房" value="2" />
          </el-select>
          <tooltip-msg
            messages="筛选客户类型之后只会显示该客户类型的改价窗口"
            place="bottom"
            style="display: inline-block"
          />
          <el-autocomplete placeholder="请输入内容" style="margin-left: 10px" />
          <el-autocomplete
            placeholder="输入商品名称/助记码进行检索"
            style="width: 270px; margin-right: 5px; margin-top: 3px"
            suffix-icon="el-icon-search"
          />
          <el-select
            class="selectW"
            placeholder="全部商品"
            style="width: 130px; margin-right: 5px"
          >
            <el-option label="全部商品" value="0" />
            <el-option label="时价商品" value="1" />
            <el-option label="非时价商品" value="2" />
          </el-select>
          <tooltip-msg
            messages="选择商品类型"
            place="bottom"
            style="display: inline-block"
          />
          <el-checkbox v-model="checked" style="margin-left: 10px">
            按百分比计算
          </el-checkbox>
          <tooltip-msg
            messages="注意：商品没有最近一次进货价的时候,不能按百分比修改价格.勾选按钮时,可以根据最近一次进价按百分比计算售价."
            place="bottom"
            style="display: inline-block"
          />
          <el-button style="float: right; margin-top: 3px">修改价格</el-button>
        </div>
        <el-table :data="batchData" style="width: 100%">
          <el-table-column label="商品" prop="date" />
          <el-table-column label="下单数量" prop="name" />
          <el-table-column label="单位" prop="address" />
          <el-table-column label="最后一次进价" prop="address" />
          <el-table-column label="设置不同客户类型价格" prop="address" />
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next, sizes, jumper"
          :page-size="10"
          :page-sizes="[10, 20, 30, 40, 100]"
          style="text-align: left"
          :total="0"
        />
      </el-tab-pane>
      <el-tab-pane label="改价记录" name="second">
        <el-form class="demo-form-inline" :inline="true" :model="formInline">
          <el-form-item label="发货日期:">
            <el-date-picker
              end-placeholder="结束日期"
              range-separator="-"
              start-placeholder="开始日期"
              style="width: 200px"
              type="daterange"
            />
          </el-form-item>
          <el-form-item label="订单号:">
            <el-input v-model="formInline.region" placeholder="订单号" />
          </el-form-item>
          <el-form-item label="搜索:">
            <el-input v-model="formInline.region" placeholder="商品名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="recordData" style="width: 100%">
          <el-table-column label="订单号" prop="date" />
          <el-table-column label="发货日期" prop="name" />
          <el-table-column label="操作人" prop="address" />
          <el-table-column label="变更内容" prop="address" />
          <el-table-column label="修改前价格" prop="address" />
          <el-table-column label="修改后价格" prop="address" />
          <el-table-column label="操作时间" prop="address" />
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next, sizes"
          :page-size="10"
          :page-sizes="[20, 30, 40, 50]"
          style="text-align: right"
          :total="0"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import TooltipMsg from '@/components/TooltipMsg.vue'
  export default {
    components: {
      TooltipMsg,
    },
    data() {
      return {
        activeName: 'first',
        setting: true,
        checked: false,
        options: [
          {
            value: 'quanbu',
            label: '全部分类',
          },
          {
            value: 'zhinan',
            label: '指南',
            children: [
              {
                value: 'shejiyuanze',
                label: '设计原则',
              },
              {
                value: 'daohang',
                label: '导航',
              },
            ],
          },
          {
            value: 'zujian',
            label: '组件',
            children: [
              {
                value: 'basic',
                label: 'Basic',
              },
              {
                value: 'form',
                label: 'Form',
              },
            ],
          },
          {
            value: 'ziyuan',
            label: '资源',
            children: [
              {
                value: 'axure',
                label: 'Axure Components',
              },
            ],
          },
        ],
        batchData: [],
        formInline: {},
        recordData: [],
      }
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 0 20px;

    .titleDot {
      position: relative;
      font-weight: 400;
      padding: 15px 0 15px 18px;

      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 2px;
        width: 6px;
        height: 6px;
        margin-top: -3px;
        border-radius: 4px;
        background: #03ac54;
      }
    }
  }
</style>
